import React from "../core/react";
import "./tyle.css";

export function Todos() {
  const [filter, setFilter] = React.useState("all");
  const [inputValue, setInputValue] = React.useState("");
  const [recordTodos, setRecordTodos] = React.useState([]);
  const [todos, setTodos] = React.useState([
    {
      title: "抽烟",
      id: crypto.randomUUID(),
      status: "active",
    },
    {
      title: "喝酒",
      id: crypto.randomUUID(),
      status: "done",
    },
    {
      title: "敲代码",
      id: crypto.randomUUID(),
      status: "active",
    },
  ]);

  console.log("🚀 ~ todos:", todos);
  React.useEffect(() => {
    // console.log("effect");
    const record = JSON.parse(localStorage.getItem("todos"));
    if (record) {
      console.log("🚀 ~ React.useEffect ~ record:", record);
      setTodos(record);
    }
  }, []);

  React.useEffect(() => {
    if (filter === "all") {
      setRecordTodos(todos);
    } else if (filter === "active") {
      const filted = todos.filter((todo) => todo.status === "active");
      setRecordTodos(filted);
    } else if (filter === "done") {
      const filted = todos.filter((todo) => todo.status === "done");
      setRecordTodos(filted);
    }
  }, [filter, todos]);

  function handleSave() {
    window.localStorage.setItem("todos", JSON.stringify(todos));
  }

  function handleCancel(id) {
    const newTodos = todos.map((todo) => {
      if (id === todo.id) {
        return { ...todo, status: "active" };
      }
      return todo;
    });

    setTodos(newTodos);
  }

  function handleDone(id) {
    const newTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, status: "done" };
      }
      return todo;
    });
    setTodos(newTodos);
  }

  function handleRemove(id) {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  }

  function handleAdd() {
    addTodo(inputValue);
    setInputValue("");
  }
  function addTodo(title) {
    setTodos((todos) => [...todos, createNewTodo(title)]);
  }
  function createNewTodo(title) {
    return { title, status: "active", id: crypto.randomUUID() };
  }

  return (
    <div>
      <h1>TODOS</h1>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button onClick={handleAdd}>Add</button>
        <button onClick={handleSave}>Save</button>
        <div>
          <label>
            <input
              type="radio"
              name="filter"
              checked={filter === "all"}
              onChange={() => setFilter("all")}
            />
            All
          </label>

          <label>
            <input
              type="radio"
              name="filter"
              checked={filter === "active"}
              onChange={() => setFilter("active")}
            />
            active
          </label>

          <label>
            <input
              type="radio"
              name="filter"
              checked={filter === "done"}
              onChange={() => setFilter("done")}
            />
            done
          </label>
        </div>
      </div>
      <div>
        <button>All</button>
        <button>done</button>
      </div>
      <ul>
        {...recordTodos.map((todo) => (
          <li className={todo.status}>
            {/* {todo.title}
            <button onClick={() => handleRemove(todo.id)}>remove</button>
            {todo.status === "active" ? (
              <button onClick={() => handleDone(todo.id)}>Done</button>
            ) : (
              <button onClick={() => handleCancel(todo.id)}>Cancel</button>
            )} */}

            <TodoItem
              todo={todo}
              handleAdd={handleAdd}
              handleRemove={handleRemove}
              handleDone={handleDone}
              handleCancel={handleCancel}
            ></TodoItem>
          </li>
        ))}
      </ul>
    </div>
  );
}

function TodoItem({ todo, handleCancel, handleDone, handleRemove }) {
  return (
    <div>
      {todo.title}
      <button onClick={() => handleRemove(todo.id)}>remove</button>
      {todo.status === "active" ? (
        <button onClick={() => handleDone(todo.id)}>Done</button>
      ) : (
        <button onClick={() => handleCancel(todo.id)}>Cancel</button>
      )}
    </div>
  );
}
